
<template>
    <div>
        <el-upload
                class="avatar-uploader"
                action=""
                :http-request="upLoad"
                :show-file-list="false"
                :limit="limit"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload">
                <img v-if="newimageUrl" :src="newimageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传JPEG/JPG/PNG文件，且不超过2M</div> 
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        
    </div>
   
</template>

<script>
import { put } from "../utils/aliyun.oss.client.js";

export default {
    name: "upload",
    props: {
        imageUrl: {},
    },
    data() {
        return {
            newimageUrl: "",
            limit: 1,
            // 接口返回的图片地址
            dialogImageUrl: "",
            dialogVisible: false,
            // 用来存放图片地址
            // imageUrl: "",
            //文字编辑
            personalData: {
                desc: "",
            },
            rules: {},
        };
    },
    watch: {
        imageUrl: {
            immediate: true,
            handler: function(imageUrl) {
                if (!imageUrl) {
                    // this.fileList = [];
                    this.newimageUrl = "";
                    return;
                }
                this.newimageUrl = imageUrl;
            },
        },
    },
    created() {
        this.ss();
    },
    methods: {
        ss() {
            console.log(this.imageUrl);
        },
        /**
         * 自定义上传方法
         */
        upLoad(file) {
            var objName = "image" + `${Date.parse(new Date())}` + ".jpg"; //定义唯一的文件名
            // 调用 ali-oss 中的方法
            put(`blog_${objName}`, file.file)
                .then((res) => {
                    console.log("上传上传", res);
                    this.newimageUrl = res.url;
                    // this.imageUrl.push({
                    //     name: file.file.name,
                    //     url: res.url,
                    // });
                    // console.log(this.imageUrl);
                    this.$emit("returnImgUrl", this.newimageUrl);
                })
                .catch((err) => {
                    console.log(`阿里云OSS上传图片失败回调`, err);
                });
        },

        // 图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        beforeAvatarUpload(file) {
            // const isJPEG = file.name.split(".")[1] === "jpeg";

            const isJPEG = file.type === "image/jpeg";
            const isJPG = file.type === "image/jpg";
            const isPNG = file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG && !isJPEG && !isPNG) {
                this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
            }
            return (isJPEG || isJPG || isPNG) && isLt2M;
        },
    },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #000000;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
